<template>
    <j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" :keyboard="false"
        :forceRender="true" switchFullscreen @cancel="handleCancel" style="top: 20px; height: 95%">
        <template slot="footer">
            <a-button @click="handleCancel">取消</a-button>
            <a-button v-if="checkFlag && isCanCheck" :loading="confirmLoading"
                @click="handleOkAndCheck">保存并审核</a-button>
            <a-button type="primary" :loading="confirmLoading" @click="handleOk">保存</a-button>
            <!--发起多级审核-->
            <a-button v-if="!checkFlag" @click="handleWorkflow()" type="primary">提交流程</a-button>
        </template>
        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-row class="form-row" :gutter="24">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员卡号">
                            <a-select placeholder="选择会员卡号" v-decorator="['organId']" :disabled="!rowCanEdit"
                                :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">
                                <div slot="dropdownRender" slot-scope="menu">
                                    <v-nodes :vnodes="menu" />
                                    <a-divider style="margin: 4px 0" />
                                    <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer"
                                        @mousedown="(e) => e.preventDefault()" @click="addMember">
                                        <a-icon type="plus" /> 新增会员
                                    </div>
                                </div>
                                <a-select-option v-for="(item, index) in retailList" :key="index" :value="item.id">
                                    {{ item.supplier }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                            <j-date v-decorator="['operTime', validatorRules.operTime]" :show-time="true" />
                        </a-form-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                            <a-input placeholder="请输入单据编号" v-decorator.trim="['number']" :readOnly="true" />
                        </a-form-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联单据">
                            <a-input-search placeholder="请选择关联单据" v-decorator="['linkNumber']"
                                @search="onSearchLinkNumber" :readOnly="true" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="24">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售员">
                            <a-select style="width: 100%" placeholder="请选择销售员" showSearch
                                v-decorator="['salesMan', validatorRules.salesMan]" :dropdownMatchSelectWidth="false"
                                optionFilterProp="children" allowClear>
                                <a-select-option v-for="(item, index) in cgList" :key="index" :value="item.id">
                                    {{ item.userName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="24">
                    <a-col :lg="18" :md="12" :sm="24">
                        <j-editable-table id="billModal" :ref="refKeys[0]" :loading="materialTable.loading"
                            :columns="materialTable.columns" :dataSource="materialTable.dataSource" :minWidth="minWidth"
                            :maxHeight="300" :rowNumber="false" :rowSelection="rowCanEdit" :actionButton="rowCanEdit"
                            :dragSort="rowCanEdit" @valueChange="onValueChange" @added="onAdded" @deleted="onDeleted">
                            <template #buttonAfter>
                                <a-row v-if="rowCanEdit" :gutter="24" style="float: left; padding-bottom: 5px"
                                    data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入">
                                    <a-col v-if="scanStatus" :md="6" :sm="24">
                                        <a-button @click="scanEnter" style="margin-right: 8px">扫码录入</a-button>
                                    </a-col>
                                    <a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px">
                                        <a-input placeholder="请扫描商品条码并回车" v-model="scanBarCode"
                                            @pressEnter="scanPressEnter" ref="scanBarCode" />
                                    </a-col>
                                    <a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px 18px 0 0">
                                        <a-button @click="stopScan" style="margin-right: 8px">收起扫码</a-button>
                                    </a-col>
                                </a-row>
                            </template>
                            <template #depotBatchSet>
                                <a-icon type="down" @click="handleBatchSetDepot" />
                            </template>
                            <template #depotAdd>
                                <a-divider v-if="isTenant" style="margin: 4px 0" />
                                <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer" @click="addDepot">
                                    <a-icon type="plus" /> 新增仓库
                                </div>
                            </template>
                        </j-editable-table>
                        <a-row class="form-row" :gutter="24">
                            <a-col :lg="24" :md="24" :sm="24">
                                <a-form-item :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
                                    label="">
                                    <a-textarea :rows="1" placeholder="请输入备注" v-decorator="['remark']"
                                        style="margin-top: 8px" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row class="form-row" :gutter="24">
                            <a-col :lg="6" :md="12" :sm="24">
                                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件">
                                    <j-upload v-model="fileList" bizPath="bill"></j-upload>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>
                    <div class="sign">
                        <a-col :lg="6" :md="12" :sm="24">
                            <a-row class="form-row" :gutter="24">
                                <a-col :lg="24" :md="6" :sm="6"><br /><br /></a-col>
                                <a-col :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">单据金额</span>
                                        <a-input v-decorator.trim="['changeAmount']" :style="{ color: 'purple' }"
                                            :readOnly="true" />
                                    </a-form-item>
                                </a-col>
                                <!-- <a-col :lg="24" :md="6" :sm="6">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <span slot="label" style="font-size: 20px; line-height: 20px">付款金额</span>
                    <a-input
                      v-decorator.trim="['getAmount']"
                      :style="{ color: 'red' }"
                      defaultValue="0"
                      @change="onChangeGetAmount"
                    />
                  </a-form-item>
                </a-col> -->

                                <a-col v-show="payType == '预付款'" :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">预付金额</span>
                                        <a-input v-decorator.trim="['yfkMoney']" :style="{ color: '#9f9f00' }"
                                            :readOnly="!rowCanEdit" defaultValue="0" />
                                    </a-form-item>
                                </a-col>

                                <a-col :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" data-step="6"
                                        data-title="收款金额" data-intro="收款金额为收银员收取用户的实际金额">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">{{
                      payType == '扫码支付' || payType == '预付款' ? '扫码金额' : '收款金额'
                    }}</span>
                                        <a-input v-decorator.trim="['getAmount']" :style="{ color: 'red' }"
                                            :readOnly="!rowCanEdit" defaultValue="0" @change="onChangeGetAmount" />
                                    </a-form-item>
                                </a-col>

                                <a-col v-show="payType == '扫码支付' || payType == '预付款'" :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">现金金额</span>
                                        <a-input v-decorator.trim="['otherMoney']" :style="{ color: 'blue' }"
                                            :readOnly="!rowCanEdit" defaultValue="0" @change="onChangeGetOtherMoney" />
                                    </a-form-item>
                                </a-col>
                                <a-col v-show="payType == '刷卡支付' || payType == '现付'" :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" data-step="7"
                                        data-title="找零" data-intro="找零等于收款金额减去实收金额">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">找零</span>
                                        <a-input v-decorator.trim="['backAmount']" :style="{ color: 'green' }"
                                            :readOnly="true" defaultValue="0" />
                                    </a-form-item>
                                </a-col>

                                <!-- <a-col v-show="payType == '扫码支付'" :lg="24" :md="6" :sm="6">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <span slot="label" style="font-size: 20px; line-height: 20px">现金金额</span>
                    <a-input
                      v-decorator.trim="['otherMoney']"
                      :style="{ color: 'blue' }"
                      defaultValue="0"
                      :readOnly="true"
                    />
                  </a-form-item>
                </a-col> -->

                                <!-- <a-col :lg="24" :md="6" :sm="6">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <span slot="label" style="font-size: 20px; line-height: 20px">找零</span>
                    <a-input
                      v-decorator.trim="['backAmount']"
                      :style="{ color: 'green' }"
                      :readOnly="true"
                      defaultValue="0"
                    />
                  </a-form-item>
                </a-col> -->
                                <a-col :lg="24" :md="6" :sm="6">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <span slot="label" style="font-size: 20px; line-height: 20px">付款账户</span>
                                        <a-select placeholder="选择付款账户" style="font-size: 20px"
                                            v-decorator="['accountId', validatorRules.accountId]"
                                            :dropdownMatchSelectWidth="false">
                                            <div slot="dropdownRender" slot-scope="menu">
                                                <v-nodes :vnodes="menu" />
                                                <a-divider style="margin: 4px 0" />
                                                <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer"
                                                    @mousedown="(e) => e.preventDefault()" @click="addAccount">
                                                    <a-icon type="plus" /> 新增结算账户
                                                </div>
                                            </div>
                                            <a-select-option v-for="(item, index) in accountList" :key="index"
                                                :value="item.id">
                                                {{ item.name }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                    </div>
                </a-row>
            </a-form>
        </a-spin>
        <link-bill-list ref="linkBillList" @ok="linkBillListOk"></link-bill-list>
        <member-modal ref="memberModalForm" @ok="memberModalFormOk"></member-modal>
        <depot-modal ref="depotModalForm" @ok="depotModalFormOk"></depot-modal>
        <account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal>
        <batch-set-depot ref="batchSetDepotModalForm" @ok="batchSetDepotModalFormOk"></batch-set-depot>
        <workflow-iframe ref="modalWorkflow"></workflow-iframe>
    </j-modal>
</template>
<script>
import pick from "lodash.pick";
import LinkBillList from "../dialog/LinkBillList";
import MemberModal from "../../system/modules/MemberModal";
import DepotModal from "../../system/modules/DepotModal";
import AccountModal from "../../system/modules/AccountModal";
import BatchSetDepot from "../dialog/BatchSetDepot";
import WorkflowIframe from "@/components/tools/WorkflowIframe";
import { FormTypes } from "@/utils/JEditableTableUtil";
import { JEditableTableMixin } from "@/mixins/JEditableTableMixin";
import { BillModalMixin } from "../mixins/BillModalMixin";
import { getMpListShort } from "@/utils/util";
import { getAccount, depotHeadRefundAmount, getUserList } from "@/api/api";
import { getAction } from "@/api/manage";
import JUpload from "@/components/jeecg/JUpload";
import JDate from "@/components/jeecg/JDate";
import Vue from "vue";
export default {
    name: "RetailBackModal",
    mixins: [JEditableTableMixin, BillModalMixin],
    components: {
        LinkBillList,
        MemberModal,
        DepotModal,
        AccountModal,
        BatchSetDepot,
        WorkflowIframe,
        JUpload,
        JDate,
        VNodes: {
            functional: true,
            render: (h, ctx) => ctx.props.vnodes,
        },
    },
    data() {
        return {
            title: "操作",
            width: "1600px",
            moreStatus: false,
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            visible: false,
            operTimeStr: "",
            prefixNo: "LSTH",
            fileList: [],
            minWidth: 1100,
            rowCanEdit: true,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            refKeys: ["materialDataTable"],
            activeKey: "materialDataTable",
            materialTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: "仓库名称",
                        key: "depotId",
                        width: "10%",
                        type: FormTypes.select,
                        placeholder: "请选择${title}",
                        options: [],
                        allowSearch: true,
                        validateRules: [{ required: true, message: "${title}不能为空" }],
                    },
                    {
                        title: "条码",
                        key: "barCode",
                        width: "16%",
                        type: FormTypes.popupJsh,
                        kind: "material",
                        multi: true,
                        validateRules: [{ required: true, message: "${title}不能为空" }],
                    },
                    { title: "名称", key: "name", width: "12%", type: FormTypes.normal },
                    { title: "规格", key: "standard", width: "10%", type: FormTypes.normal },
                    { title: "型号", key: "model", width: "10%", type: FormTypes.normal },
                    { title: "颜色", key: "color", width: "5%", type: FormTypes.normal },
                    { title: "扩展信息", key: "materialOther", width: "7%", type: FormTypes.normal },
                    { title: "库存", key: "stock", width: "5%", type: FormTypes.normal },
                    { title: "单位", key: "unit", width: "5%", type: FormTypes.normal },
                    { title: "序列号", key: "snList", width: "12%", type: FormTypes.popupJsh, kind: "snAdd", multi: true },
                    { title: "批号", key: "batchNumber", width: "8%", type: FormTypes.input },
                    { title: "有效期", key: "expirationDate", width: "9%", type: FormTypes.date },
                    { title: "多属性", key: "sku", width: "9%", type: FormTypes.normal },
                    { title: "原数量", key: "preNumber", width: "6%", type: FormTypes.normal },
                    { title: "已退货", key: "finishNumber", width: "6%", type: FormTypes.normal },
                    {
                        title: "数量",
                        key: "operNumber",
                        width: "6%",
                        type: FormTypes.inputNumber,
                        statistics: true,
                        validateRules: [{ required: true, message: "${title}不能为空" }],
                    },
                    { title: "单价", key: "unitPrice", width: "6%", type: FormTypes.inputNumber },
                    { title: "金额", key: "allPrice", width: "6%", type: FormTypes.inputNumber, statistics: true },
                    { title: "备注", key: "remark", width: "7%", type: FormTypes.input },
                    { title: "关联id", key: "linkId", width: "5%", type: FormTypes.hidden },
                ],
            },
            confirmLoading: false,
            validatorRules: {
                operTime: {
                    rules: [{ required: true, message: "请输入单据日期!" }],
                },
                accountId: {
                    rules: [{ required: true, message: "请选择结算账户!" }],
                },
                salesMan: {
                    rules: [{ required: true, message: "请选择销售人员!" }],
                },
            },
            url: {
                add: "/depotHead/addDepotHeadAndDetail",
                edit: "/depotHead/updateDepotHeadAndDetail",
                detailList: "/depotItem/getDetailList",
            },
            payType: "扫码支付",
            cgList: [],
        };
    },
    created() {
        let realScreenWidth = window.screen.width;
        this.minWidth = realScreenWidth < 1500 ? 800 : 1100;
        getUserList({}).then((res) => {
            if (res) {
                this.cgList = res;
            }
        });
    },
    methods: {
        //调用完edit()方法之后会自动调用此方法
        editAfter() {
            this.billStatus = "0";
            this.currentSelectDepotId = "";
            this.rowCanEdit = true;
            this.materialTable.columns[1].type = FormTypes.popupJsh;
            this.changeColumnHide();
            this.changeFormTypes(this.materialTable.columns, "snList", 0);
            this.changeFormTypes(this.materialTable.columns, "batchNumber", 0);
            this.changeFormTypes(this.materialTable.columns, "expirationDate", 0);
            this.changeFormTypes(this.materialTable.columns, "preNumber", 0);
            this.changeFormTypes(this.materialTable.columns, "finishNumber", 0);
            if (this.action === "add") {
                this.payType = "扫码支付";
                this.addInit(this.prefixNo);
                this.fileList = [];
                this.$nextTick(() => {
                    this.form.setFieldsValue({ getAmount: 0, backAmount: 0 });
                });
            } else {
                if (this.model.linkNumber) {
                    this.rowCanEdit = false;
                    this.materialTable.columns[1].type = FormTypes.normal;
                }
                this.model.operTime = this.model.operTimeStr;
                if (this.model.backAmount) {
                    this.model.getAmount = (this.model.changeAmount + this.model.backAmount).toFixed(2);
                } else {
                    this.model.getAmount = this.model.changeAmount;
                }
                this.fileList = this.model.fileName;
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, "organId", "operTime", "number", "linkNumber", "remark", "discount", "discountMoney", "discountLastMoney", "otherMoney", "accountId", "changeAmount", "getAmount", "backAmount", "yfkMoney", "salesMan"));
                });
                // 加载子表数据
                let params = {
                    headerId: this.model.id,
                    mpList: getMpListShort(Vue.ls.get("materialPropertyList")), //扩展属性
                    linkType: "basic",
                };
                let url = this.readOnly ? this.url.detailList : this.url.detailList;
                this.requestSubTableData(url, params, this.materialTable);
            }
            //复制新增单据-初始化单号和日期
            if (this.action === "copyAdd") {
                this.model.id = "";
                this.model.tenantId = "";
                this.copyAddInit(this.prefixNo);
            }
            this.initSystemConfig();
            this.initRetail();
            this.initDepot();
            this.initAccount();
        },
        onChangeGetOtherMoney(e) {
            const value = e.target.value;
            let changeAmount = this.form.getFieldValue("changeAmount") - 0;

            if (this.payType == "预付款") {
                let money = Math.abs(this.advanceIn - changeAmount < 0 ? this.advanceIn - changeAmount : 0);
                let getAmount = (money - value).toFixed(2) - 0;
                this.$nextTick(() => {
                    this.form.setFieldsValue({ getAmount: getAmount });
                });
            } else {
                let getAmount = (changeAmount - value).toFixed(2) - 0;
                this.$nextTick(() => {
                    this.form.setFieldsValue({ getAmount: getAmount });
                });
            }
        },
        //提交单据时整理成formData
        classifyIntoFormData(allValues) {
            let totalPrice = 0;
            let billMain = Object.assign(this.model, allValues.formValue);
            let detailArr = allValues.tablesValue[0].values;
            billMain.type = "入库";
            billMain.subType = "零售退货";
            billMain.defaultNumber = billMain.number;
            for (let item of detailArr) {
                totalPrice += item.allPrice - 0;
            }
            billMain.totalPrice = 0 - totalPrice;
            billMain.changeAmount = 0 - billMain.changeAmount;
            if (this.fileList && this.fileList.length > 0) {
                billMain.fileName = this.fileList;
            } else {
                billMain.fileName = "";
            }
            if (this.model.id) {
                billMain.id = this.model.id;
            }
            billMain.status = this.billStatus;
            return {
                info: JSON.stringify(billMain),
                rows: JSON.stringify(detailArr),
            };
        },
        initAccount() {
            getAccount({}).then((res) => {
                if (res && res.code === 200) {
                    this.accountList = res.data.accountList;
                }
            });
        },
        //改变实收金额、收款金额的值
        autoChangePrice(target) {
            let allLastMoney = target.statisticsColumns.allPrice;
            this.$nextTick(() => {
                this.form.setFieldsValue({ changeAmount: allLastMoney, getAmount: allLastMoney, backAmount: 0 });
            });
        },
        //改变收款金额
        onChangeGetAmount(e) {
            const value = e.target.value;
            let changeAmount = this.form.getFieldValue("changeAmount") - 0;
            let backAmount = (value - changeAmount).toFixed(2) - 0;
            this.$nextTick(() => {
                this.form.setFieldsValue({ backAmount: backAmount });
            });
        },
        onSearchLinkNumber() {
            this.$refs.linkBillList.show("出库", "零售", "会员", "1");
            this.$refs.linkBillList.title = "选择零售出库";
        },
        linkBillListOk(selectBillDetailRows, linkNumber, organId, discountMoney, deposit, remark, salesMan, contact, address, addressee, linkNumberId, payType, otherMoney, yfkMoney) {
            this.rowCanEdit = false;
            this.materialTable.columns[1].type = FormTypes.normal;
            this.changeFormTypes(this.materialTable.columns, "preNumber", 1);
            this.changeFormTypes(this.materialTable.columns, "finishNumber", 1);
            if (selectBillDetailRows && selectBillDetailRows.length > 0) {
                // 获取单子已经退款金额
                depotHeadRefundAmount({
                    number: linkNumber,
                }).then((res) => {
                    let listEx = [];
                    let allTaxLastMoney = 0;
                    for (let j = 0; j < selectBillDetailRows.length; j++) {
                        let info = selectBillDetailRows[j];
                        info.linkId = info.id;
                        allTaxLastMoney += info.allPrice;
                        listEx.push(info);
                        this.changeColumnShow(info);
                    }
                    this.materialTable.dataSource = listEx;
                    ///金额重新赋值
                    allTaxLastMoney = allTaxLastMoney ? allTaxLastMoney : 0;
                    // 单据金额
                    let discountLastMoney = allTaxLastMoney.toFixed(2) - 0;

                    // 支付方式
                    this.payType = payType;
                    // 预付款金额
                    let newYfkMoney = yfkMoney;

                    // 单据已经退款金额
                    let refundAmount = res.data.refundAmount;
                    if (newYfkMoney > 0) {
                        if (discountLastMoney + refundAmount > newYfkMoney) {
                            newYfkMoney = newYfkMoney - refundAmount > 0 ? newYfkMoney - refundAmount : 0;
                            otherMoney = otherMoney ? discountLastMoney - newYfkMoney : 0;
                        } else {
                            newYfkMoney = discountLastMoney;
                            getAmount = 0;
                            otherMoney = 0;
                        }
                    }

                    // 扫码金额
                    let getAmount = (otherMoney ? (discountLastMoney - otherMoney).toFixed(2) : discountLastMoney) - yfkMoney;

                    getAmount = getAmount > 0 ? getAmount : 0;

                    this.$nextTick(() => {
                        this.form.setFieldsValue({
                            yfkMoney: newYfkMoney,
                            organId: organId,
                            linkNumber: linkNumber,
                            getAmount: getAmount,
                            changeAmount: discountLastMoney,
                            otherMoney: otherMoney,
                            backAmount: 0,
                            remark: remark,
                        });
                    });
                    // this.$nextTick(() => {
                    //   this.form.setFieldsValue({
                    //     organId: organId,
                    //     linkNumber: linkNumber,
                    //     getAmount: discountLastMoney,
                    //     changeAmount: discountLastMoney,
                    //     backAmount: 0,
                    //     remark: remark,
                    //   })
                    // })
                });
            }
        },
    },
};
</script>
<style scoped>
.sign .ant-input {
    font-size: 30px;
    font-weight: bolder;
    text-align: center;
    border-left-width: 0px !important;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
}
</style>